<template>
  <div class="app-container">
    <div class="box-server">
      <el-row :gutter="24" class="box-elrow">
         <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="params.maxNums" @change="handleFilter"
                       placeholder="群人数">
              <el-option v-for="item in options3"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
         <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="params.is_all_banned" @change="handleFilter"
                       placeholder="使用状态">
              <el-option v-for="item in options4"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
          <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-select v-model="params.is_allow" @change="handleFilter"
                       placeholder="邀入群">
              <el-option v-for="item in options"
                         :key="item.value"
                         :label="item.label"
                         :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <el-input v-model="params.searchWord"
                      placeholder="用户ID/昵称/手机号" @keyup.enter.native="handleFilter"></el-input>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-light">
            <el-button type="primary" @click="handleFilter()">搜索</el-button>
            <!-- <el-button type="success"
                       @click="establish">创建用户</el-button> -->
                        <!-- <el-button type="primary" @click="search()">重置</el-button> -->
                        <el-button type="primary"  :loading="downloadLoading" @click="exportdword()">导出</el-button>
                        <el-button type="primary" @click="search()">批量禁言</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="Exhibition">
        <div class="exhibitionleft"></div>
        <div class="exhibitionright">
          <div v-for="(item,index) in listtitle"
               :key="index"
               class="exhtitle">
            <div>{{item.numberTitle}}</div>
            <div class="box-item">{{item.number}}
            </div>
          </div>
        </div>
      </div>
      <div class="box-data">
        <el-table ref="multipleTable"
                  :data="tableData"
                  tooltip-effect="dark"
                  style="width: 100%;"
                  border
                  height="650px"
                  center
                  @selection-change="handleSelectionChange">
          <el-table-column type="selection">
          </el-table-column>

          <el-table-column prop="im_gid"
                           label="群组ID">
          </el-table-column>
          <el-table-column prop="user_id"
                           label="创建者ID">
          </el-table-column>
          <el-table-column  label="头像">
            <template slot-scope="scope">
              <img :src="scope.headimg" alt="" height="40" width="40">
            </template>
          </el-table-column>
          <el-table-column prop="name"
                           label="群名称">
          </el-table-column>
          <el-table-column prop="description"
                           label="群组说明">
          </el-table-column>
          <!-- <el-table-column prop="open" :show-overflow-tooltip="true"
          :formatter="statusformatter"
                           label="群类型">
          </el-table-column> -->
          <!-- <el-table-column prop="is_audit" :show-overflow-tooltip="true"
          :formatter="is_auditstatus"
                           label="是否需要审批">
          </el-table-column> -->
          <el-table-column prop="is_allow" :show-overflow-tooltip="true"
          :formatter="is_allow"
                           label="是否允许群成员邀入此群">
          </el-table-column>
          <el-table-column prop="is_all_banned" :show-overflow-tooltip="true"
          :formatter="statusformatter"
                           label="状态">
          </el-table-column>
          <el-table-column prop="max_count"
                           label="群组的总成员上限">
          </el-table-column>
           <el-table-column prop="users_count"
                           label="群人数">
          </el-table-column>
           <el-table-column prop="created_at"
                           label="创建时间">
          </el-table-column>
           <!-- <el-table-column prop="updated_at"
                           label="更新时间">
          </el-table-column> -->
          <el-table-column label="操作"
                           width="700">
            <template slot-scope="scope">
              <!-- <el-button size="mini"
                         @click="handleEdit(scope.$index, scope.row)">修改配置</el-button> -->
              <!-- <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">重置密码</el-button> -->
              <!-- <el-button size="mini"
                         @click="handleEdit(scope.$index, scope.row)">充值</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">锁定</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">流水</el-button> -->
                <el-button size="mini"
                         type="danger"
                         @click="Forbiddenwords(scope.$index, scope.row)">禁言</el-button>
              <el-button size="mini"
                         type="danger"
                         @click="Membermanagement(scope.$index, scope.row)">成员管理</el-button>
              <!-- <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">通讯录</el-button> -->
              <!-- <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">邀请码</el-button> -->
              <el-button size="mini"
                         type="danger"
                         @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="box-page">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="parseInt(params.pageNum)"
                       :page-sizes="[3, 5, 15, 30]"
                       :page-size="parseInt(params.page)"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="parseInt(params.total)">
        </el-pagination>
      </div>
    </div>
    <!-- 禁言 -->
     <el-dialog title="提示"
      :visible.sync="dialogFormVisible"
        width="30%"
      >
      <el-form :model="resetForm"  ref="sizeForm" label-width="100px" class="demo-ruleForm">
        <div class="wnring">确定对该群组禁言吗？</div>
      <el-form-item label="封号时间">
          <el-select v-model="resetForm.type" placeholder="请选择封号时间">
              <el-option
                  v-for="item in warningopston"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
          </el-select>
        </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="piliangsealtitle()">保存</el-button>
      </div>
  </el-dialog>
  <!-- 群成员禁言 -->
   <el-dialog title="提示"
      :visible.sync="dialogFormVisible"
        width="30%"
      >
      <el-form :model="Forbiddenwords"  ref="sizeForm" label-width="100px" class="demo-ruleForm">
        <div class="wnring">确定禁言吗？</div>
      <el-form-item label="封号时间">
          <el-select v-model="Forbiddenwords.timeType" placeholder="请选择封号时间">
              <el-option
                  v-for="item in warningopston2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
          </el-select>
        </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="piliangsealtitle1()">保存</el-button>
      </div>
  </el-dialog>
  <!-- 成员管理 -->
  <el-dialog title="成员管理" :visible.sync="MembermanagementVise" width="60%">
    <el-row :gutter="24" class="prtop">
      <el-col :span="12">
           <div class="grid-content bg-purple-light">
            <el-input v-model="param.nickname"
                      placeholder="关键词搜索"  @keyup.enter.native="handleFiltersearch"></el-input>
          </div>
      </el-col>
       <el-col :span="12">
          <div class="grid-content bg-purple-light">
             <el-button type="primary" @click="handleFiltersearch">查询</el-button>
            <el-button type="warning" @click="handleFilter()">批量禁言</el-button>
            <el-button type="danger" @click="memberremovaldelete()">批量移除</el-button>
          </div>
        </el-col>
    </el-row>
   <el-table
    ref="multipleTable"
    :data="gridData"
    tooltip-effect="dark"
    border
    style="width: 100%"
      @select-all="select">
    <el-table-column
    label="序号"
       type="selection">
    </el-table-column>
    <el-table-column
      label="成员ID">
      <template slot-scope="scope">{{ scope.row.user_id }}</template>
    </el-table-column>
    <el-table-column
      prop="user.nickname"
      label="成员昵称">
    </el-table-column>
    <el-table-column
      prop="role.name"
      label="角色"
     >
    </el-table-column>
     <!-- <el-table-column
      prop="address"
      label="是否屏蔽信息"
     >
    </el-table-column> -->
      <el-table-column
      prop="status"
      :show-overflow-tooltip="true"
          :formatter="statusformatters"
      label="使用状态"
     >
    </el-table-column>
    <el-table-column
      prop="created_at"
      label="入群时间">
    </el-table-column>  
     <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="warning"
          @click="memberremovalForbiddenwords(scope.$index, scope.row)">禁言</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="memberremovaldelete(scope.$index, scope.row)">移除</el-button>
      </template>
    </el-table-column>
  </el-table> 
  <div class="box-page">
        <el-pagination @size-change="handleSizeChange1"
                       @current-change="handleCurrentChange1"
                       :current-page="parseInt(param.pageNum)"
                       :page-sizes="[3, 5, 15, 30]"
                       :page-size="parseInt(param.page)"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="parseInt(param.total)">
        </el-pagination>
      </div>
</el-dialog>
  </div>
</template>

<script>
import { groupLists,setStatus,getGroupUsers,delGroupUser,addManyBanned }from "@/api/user";
import {exportExcel} from "@/exportExcel/export2Excel"
export default {

  data() {
    return {
      dialogTableVisible:false,
      downloadLoading:false,
       gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      resetForm:{
        type:""
      },
      textMap: {
        update: 'Edit',
        create: 'Create'
      },
      MembermanagementVise:false,
      // rules: {
      //   type: [{ required: true, message: 'type is required', trigger: 'change' }],
      //   timestamp: [{ type: 'date', required: true, message: 'timestamp is required', trigger: 'change' }],
      //   title: [{ required: true, message: '请输入名字', trigger: 'blur' }],
      //   cellphone: [{ required: true, message: '请输入手机号', trigger: 'blur' }],
      //   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      //   region: [{ required: true, message: '请选择性别', trigger: 'blur' }],
      //   official: [{ required: true, message: '请选择公众号', trigger: 'blur' }],
      //   value1: [{ required: true, message: '请选择日期', trigger: 'blur' }],
      // },
         warningopston:[
         {
          value: "oneDay",
          label: "5分钟"
        },
         {
          value: "threeDay",
          label: "1小时"
        }, {
          value: "fiveDay",
          label: "1天"
        },
         {
          value: "aWeek",
          label: "7天"
        },
         {
          value: "4threeMonth",
          label: "30天"
        }
      ],
        warningopston2:[
         {
          value: "fiveMin",
          label: "5分钟"
        },
         {
          value: "oneHour",
          label: "1小时"
        }, {
          value: "oneDay",
          label: "1天"
        },
         {
          value: "sevenDay",
          label: "7天"
        },
         {
          value: "oneMonth",
          label: "30天"
        }
      ],
      temp: {
        id: undefined,
        importance: 1,
        remark: '',
        timestamp: new Date(),
        title: '',
        type: '',
        status: 'published',
        cellphone: "",
        region: "",
        official: "",
        password: "",
        value1: "",
      },
      beijing: "",
      shanghai: "",
      shi: "",
      fou: "",
      dialogStatus: "",
      dialogFormVisible: false,
      options: [{
        value: '0',
        label: '不允许'
      }, {
        value: '1',
        label: '允许'
      }],
       options3: [{
        value: 'minNums',
        label: '1~50'
      }, {
        value: 'maxNums',
        label: '100~150'
      }],
      options4:[{value:"0",label:"正常"},{value:"1",label:"禁言"}],
      robot: [{
        value: '1',
        label: '是'
      }, {
        value: '2',
        label: '否'
      }],
      value: '',
      value1: '',
      value2: "",
      input: "",
      listtitle: [{
        numberTitle: "用户数量:",
        number: "0",
      },
      {
        numberTitle: "在线用户量:",
        number: "0",
      },
      // {
      //   numberTitle: "公开群数量：",
      //   number: "0",
      // }
      ],
      tableData: [],
      multipleSelection: [],
      multipleSelection1:[],
      params:{
        minNums:"",
        maxNums:"",
        is_allow:"",
        is_all_banned:"",
        searchWord:"",
        page:"",
        pageNum:"",
        total:"",
        export:0
      },
      headimg:"",
      param:{
        groupId:"",
        page:"",
        total:"",
        pageNum:"",
        nickname:""
      },
      Groupmembers:{
        user_id:"",
        im_gid:""
      },
      Forbiddenwords:{
        groupId:"",
        member_id:[],
        timeType:""
      }
    }

  },
  created(){
    this.list();
  },
  methods: {
    // 列表渲染
      handleFilter(val){
      this.params.page=val;
        console.log("res");
      this.list();
    },
    search(){
      this.params.open="";
      this.params.searchWord=""
      this.list();
    },
    Membermanagement(row,value){
      console.log(value)
     this.param.groupId=value.id;
     this.Groupmembers.im_gid=value.im_gid;
     console.log(this.Groupmembers.im_gid);
     this.Forbiddenwords.groupId=value.id;
     console.log(this.Forbiddenwords.groupId);
      this.MembermanagementVise=true;
      this.chengyuan();
    },
    chengyuan(){
      getGroupUsers(this.param).then((response)=>{
            this.gridData=response.data;
            this.param.page=response.page;
            this.param.pageNum=response.pagesize;
            this.param.total=response.total;
      }) 
    },
    handleFiltersearch(val){
      this.param.page=val; 
      this.chengyuan();
    },
    handleSizeChange1(val){
      consoloe.log(val);
       this.param.pageNum=val;
      this.chengyuan();
    },
    select(val) {
      this.multipleSelection1=val;
    console.log(this.multipleSelection1);
      this.chengyuan();
    },
    handleCurrentChange1(val){
      this.param.page=val;
      this.chengyuan();
    },
     statusformatter(row,column){
        const lists= row.is_all_banned;
         if(lists==0){
        return "正常"
      }else if(lists==1){
        return "禁言"
      }
      },
       statusformatters(row,column){
        const lists= row.status;
         if(lists==0){
        return "正常"
      }else if(lists==1){
        return "删除"
      }else if(lists==2){
        return "拉黑"
      }else if(lists==3){
        return "禁言"
      }
      },
      is_auditstatus(row,column){
       const statusdit= row.is_audit;
        if(statusdit==1){
            return "需要"
        }else if(statusdit==0){
          return "不需要"
        }
      },
      is_allow(row,column){
      const statusdit= row.is_allow;
        if(statusdit==1){
            return "允许"
        }else if(statusdit==0){
          return "不允许"
        }
      },
    list(){
      this.loading=false;
      groupLists(this.params).then((response)=>{
        this.tableData=response.data;
        response.data.map((item)=>{
          console.log(item);
          this.headimg=item.group_manager.headimg;
          console.log(this.headimg)
        })
        this.params.page=response.summary.page;
        this.params.pageNum=response.summary.pagesize;
        this.params.total=response.summary.total;
      })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    Forbiddenwords(){
      console.log('res');
      this.dialogFormVisible=true;
      // setStatus().then(()=>{

      // })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.dialogFormVisible=true;
      console.log(index, row);
    },
    handleDelete(index, row) {
      this.$confirm("确认要删除吗?", "提示", {
        confirmButtonText: "确认",
        concelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log("yes");
      }).catch(() => {
        console.log("erer")
      })
    },
    memberremovaldelete(row,value){
      console.log(value);
      this.Groupmembers.user_id=value.user_id;
       this.$confirm("确认要删除吗?", "提示", {
        confirmButtonText: "确认",
        concelButtonText: "取消",
        type: "warning"
      }).then(async() => {
       await delGroupUser(this.Groupmembers);
       this.chengyuan();
       this.$message({
          type: "success",
          message: "删除成功"
        });
      })
    },
    // 成员禁言
    memberremovalForbiddenwords(row,value){
      console.log(value);
       this.Forbiddenwords.member_id=[];  
      this.dialogFormVisible=true;
      this.Forbiddenwords.member_id.push(value.user_id);
    },
    // 成员禁言请求
    piliangsealtitle1(){
      addManyBanned({member_id:JSON.stringify(this.Forbiddenwords.member_id),groupId:this.Forbiddenwords.groupId,timeType:this.Forbiddenwords.timeType}).then((response)=>{
             this.$message({
          type: "success",
          message: "禁言成功"
        });
        this.chengyuan();
        this.dialogFormVisible=false;
      })
    },
    handleSizeChange(val) {
      this.params.pageNum=val;
      this.list();
    },
    handleCurrentChange(val) {
      this.params.page=val;
      this.list();
    },
    deleteuser() {
      this.$confirm("确认要删除吗?", "提示", {
        confirmButtonText: "确认",
        concelButtonText: "取消",
        type: "warning"
      }).then(() => {
        console.log("yes");
      }).catch(() => {
        console.log("erer")
      })
    },
    establish() {
      this.dialogFormVisible = true;
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
          updateArticle(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Update Successfully',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    // 导出
  
    exportdword(){
        console.log(this.tableData);
        this.params.export=1;
       groupLists(this.params).then((response)=>{
        this.tableData=response.data;
        response.data.map((item)=>{
          console.log(item);
          this.headimg=item.group_manager.headimg;
          console.log(this.headimg)
        })
        // this.params.page=response.summary.page;
        // this.params.pageNum=response.summary.pagesize;
        // this.params.total=response.summary.total;
        this.exportExcel();
      })
    },
   exportExcel(){
     import("@/exportExcel/export2Excel").then((excel)=>{
       const tHeader=["群主ID","创建者ID","头像","群名称","群主说明","是否允许群成员邀入此群","状态","群主的总成员上限","群人数","创建时间"];
       const filterVal=["im_gid","user_id","headimg","name","is_allow","status","max_count","users_count","created_at"];
       const list = this.dataList;
       const data =this.formatJson(filterVal,list);
       const autoWidth=true;
       excel.export_json_to_excel({
         header:tHeader,
         data,
         filename:"群组管理",
         autoWidth:true
       })

     })
   }, 
   formatJson(filterVal,tableData){
     this.params.exprot=1;
     console.log(filterVal,"-------------",tableData)
     return this.tableData.map(v=>filterVal.map(j=>v[j]));
   }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
}
.box-server {
  height: 100%;
  background-color: #ffff;
  margin: 20px 20px 20px 20px;
  .box-elrow {
    padding: 16px 16px 16px 16px;
  }
  .Exhibition {
    height: 50px;
    margin: 10px 16px 0px;
    display: flex;
    background-color: #f2f2f2;
    .exhibitionleft {
      width: 8px;
      background-color: #009688;
    }
    .exhibitionright {
      display: flex;
      // justify-content: space-between;
      align-content: center;
      .box-item {
        background-color: #3ebfea;
        padding: 8px 12px 8px 12px;
        border-radius: 5px;
        margin-right: 5px;
      }
    }
  }
  .exhtitle {
    display: flex;
    align-items: center;
  }
  .box-data {
    padding: 16px 16px 16px 16px;
  }
  .el-select {
    width: 100%;
  }
  .el-date-editor.el-input {
    width: 100%;
  }
}
.pr {
  padding-top: 12px;
}
.box-page {
  display: flex;
  justify-content: flex-end;
}
.prtop{
  margin-bottom:12px;
}
</style>

